Dark Editor CSS

ページ背景も含めて黒いテーマが欲しいというtweetと、それを受けてのOSXのカラー反転機能を使うと画面を黒くできるという話を見て、作ってみた

これをUserCSSに設定すると

code:style.css

.page, .page a, .page video, .page iframe,

.code-block-start, .code-block-start span {

filter: invert(100%);

}

.line {

font-weight: 600;

}

CSS filterのinvertによって色が100%反転し、エディタの中が黒くなる

https://gyazo.com/38baa64684ef3b9fd4eb2736661914d0

しかし画像やビデオは元のままの色が保たれる

100%反転をもう一度かけて、元に戻している為

settingsに設定してみた shokai.icon (2018/2/3)

黒系テーマ

projectのテーマをHacker等の黒系にすると

https://gyazo.com/d5b676e5fe811c4f1157df2e8fb8b9d5

ナビゲーションバー、関連ページリスト、エディタ外の背景色が黒っぽくなる

しかし、エディタの中は黒くならない

https://gyazo.com/02be3f732a20f72e24f1e10a7d40cc2e

なぜか？

エディタの背景色を黒にすると、他にも色々な色を設定し直す必要がある

文字色・リンク色

青リンクは存在するページ、赤リンクは空ページへのリンクという意味がある

コードブロック記法のシンタックスハイライトの色

別のCSSファイルになっていて、切り替えがめんどくさい

リンク記法の補完など

エディタ内に現れるGUI部品の色が白背景を前提に作られている

たぶん他にもある

黒いエディタに合わせて、色を再設定する部分が予想以上に多かった

スタイル上書きするDOM要素が多い

今後の機能追加で知らない間に壊れてたりするようになる

ようするに、めんどくさい

OSXのカラー反転機能

黒背景にできるんだけど、画像も色が反転してしまう

人間の顔が青くなり、髪が白くなる

アイコン記法がすごい事になる

すごい事になるのだが、スクリーンキャプチャしても元の色で保存されるので様子を見せる事ができない

Macのシステム環境設定 → アクセシビリティ → ディスプレイ → カラーを反転で試してみてほしい

CSS filterでカラー反転すると

なかなか良い shokai.icon

要素を指定して、filter: invert(100%);で色を反転できる

全ての色が反転すれば、リンク記法の補完やコードブロック記法などを細かく色指定しなくても読める色になる

Scrapboxのリンクは青リンクが存在するページ、赤リンクが空ページ、という意味がある

色反転すると意味が逆になってしまう

<a>タグにはさらにもう一度filter: invert(100%);をかけて元に戻す

画像

こちらもfilter: invert(100%);をもう一度かけて元に戻したいのだが

<img>は今のところ全て<a>で囲まれているので、元に戻っている。やらなくていい。

ビデオ

これでUIも色反転される

https://gyazo.com/b00604edfff9d53720e26c16f25ce919

Hacker系以外のテーマの場合

関連ページ部分が白いカードに黒文字になっている

このセレクタも追加すると、関連ページ部分の色を反転できる

.related-page-list, .related-page-list img, .related-page-list .link

なお、今後Scrapbox本体のHacker系テーマが更新されて、エディタ内が黒くなる場合があるかもしれない

その場合は、このUserCSSによって逆にエディタが白くなってしまう

そうなったらUserCSSから削除してください shokai.icon